import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Modal,
  Row,
  Select,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;

interface CellProps extends FormComponentProps {
  dispatch?: Dispatch<any>;
  openCellVisible: boolean;
  openCellInfo: any;
  search: any;
  changeOpenCellModal: (openCellVisible: boolean) => void;
}

@connect(({ logisCenterUnmannedList }: any) => ({ logisCenterUnmannedList }))

class OpenCellView extends Component<CellProps> {
  handleOpenCell = () => {
    const { form: { validateFields } } = this.props;

    validateFields((errors: any, values: any) => {
      if (errors) return;

      const { dispatch, search, openCellInfo } = this.props;
      if (dispatch) {
        dispatch({
          type: 'logisCenterUnmannedList/cancel',
          payload: {
            query: search,
            params: {
              ...values,
              ...openCellInfo,
            },
          },
        });
      }


      const { changeOpenCellModal } = this.props;
      changeOpenCellModal(false);
    });
  }

  render() {
    const {
      openCellVisible,
      changeOpenCellModal,
      form: { getFieldDecorator },
    } = this.props;

    return (
      <Modal
        title="确认提示"
        visible={openCellVisible}
        onOk={this.handleOpenCell}
        onCancel={() => changeOpenCellModal(false)}
      >
        <Form hideRequiredMark className="tableListForm">
          <Row gutter={12}>
            <Form.Item
              label="是否开箱"
              style={{ width: '100%' }}
            >
              {getFieldDecorator('openCell', {
                initialValue: 1,
                rules: [{ required: true, message: '请选择是否开箱' }],
              })(
                <Select placeholder="请选择">
                  <Option value={1}>开启</Option>
                  <Option value={0}>关闭</Option>
                </Select>,
              )}
            </Form.Item>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create<CellProps>()(OpenCellView);
